<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 0px;
            background: lavenderblush;
            display: flex;
        }

        .box .img1 {
            width: 0px;
            height: 0px;
            flex: 1;
            /* display: none; */
        }

        .box1 {
            height: 300px;
        }

        .img {
            /* display: inline-block !important; */
            flex: 1;
            width: 300px;
            height: 250px;
        }

        .b1 {
            position: absolute;
            width: 40px;
            height: 30px;
            top: 0;
            left: 0;
        }

        .b2 {
            top: 300px;
        }

        .box .teshu {
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../images/1.jpg" alt="">
        <img src="../images/2.jpg" alt="">
        <img src="../images/3.jpg" alt="">
    </div>
    <button class="b1">换肤</button>
</body>
<script>
    let b1 = document.querySelector(".b1");
    let img = document.querySelectorAll("img")
    let box = document.querySelector(".box");

    b1.onclick = () => {

        if (getComputedStyle(box, null).height == "300px") {
            console.log("adas")
            box.classList.remove("box1");
            img.forEach((item, index) => {
                item.classList.remove("teshu")
                item.classList.remove("img")
                item.classList.remove("img1")
            })
            b1.classList.remove("b2")
        } else {
            box.classList.add("box1")
            // console.log(getComputedStyle(box, null).height)
            b1.classList.add("b2")
            img.forEach((item, index) => {
                item.classList.add("img")
                item.onclick = () => {

                    img.forEach((item, index) => {
                        // 排他
                        if (img[index] == item) {
                            item.classList.add("img1")
                        }
                        item.classList.remove("box1")

                        // b1.classList.remove("b2")
                    })
                    item.classList.add("teshu");
                }
            })
        }
    }

</script>

</html>